<!--
 * @Author: spycym
 * @Date: 2022-11-09 15:18:23
 * @LastEditTime: 2022-11-15 23:17:18
 * @LastEditors: spycym
 * @Description: 
 * 不要随便动我的代码哟!
-->
<script lang="ts" setup>
import { useTodoStore } from "../store";
import { ref } from "vue";
const todoStore = useTodoStore();
let newTodoName = ref("");
function addNewTodo() {
  if (!newTodoName.value) return alert("请输入有效字符！");
  todoStore.addTodoObj(newTodoName.value);
  newTodoName.value = "";
}
</script>
<template>
  <div class="todo-header">
    <input
      type="text"
      v-model="newTodoName"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="addNewTodo"
    />
  </div>
</template>
<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

